AR Clip SDK

Build AR experiences in Unity that open in AR Clip as an App Clip. Your WebGL content streams in, and ARKit and AR Clip VPS handle localization.

Before you start

• Unity 2020 LTS or newer (tested with 2021+)
• The WebGL build target
• Access to the AR Clip zip uploader

Test on a phone

In the Unity Editor, most AR Clip APIs are wrapped in Application.isEditor. For real tracking, build for WebGL and test in the AR Clip mobile app.

Install the package

1. Open Window → Package Manager.
2. Click + → Add package from Git URL….
3. Paste https://github.com/WebAR-Studio/arclip_sdk.git and confirm.

Before you import, delete any old Assets/ARLib folder. Otherwise you get duplicate symbol errors like this one:

error CS0433: The type 'ARLibTester' exists in both 'ARLib' and 'Assembly-CSharp'

Import the samples

In Package Manager → AR Clip → Samples:

• Import WebGLTemplates and copy the folder it creates to the root of Assets/. It then appears under Project Settings → Player → WebGL Template.
• Import TransparentBackground and move TransparentBackground.jslib to Assets/Plugins. This gives WebGL a transparent background.

Set up the scene

1. Add an empty GameObject named ARClipController.
2. Add ARLibController to it and assign a camera to the renderCamera field.
3. Turn off the Camera component on that GameObject. Set Clear Flags = Solid Color and use RGBA(0,0,0,0) for the background.
4. Optional: in the Editor, add ARLibTester (from Samples) to simulate native callbacks.

Minimal bootstrap script

using UnityEngine;
using ARLib;

public class ARClipBootstrap : MonoBehaviour
{
    [SerializeField] private Camera renderCamera;

    private void OnEnable()
    {
        ARLibController.Initialized += HandleInitialized;
        ARLibController.VPSPositionUpdated += HandleVpsPose;
    }

    private void OnDisable()
    {
        ARLibController.Initialized -= HandleInitialized;
        ARLibController.VPSPositionUpdated -= HandleVpsPose;
    }

    private void Start()
    {
        ARLibController.SetRenderCamera(renderCamera);
        ARLibController.Initialize();
    }

    private void HandleInitialized()
    {
        ARLibController.EnableCamera();
        ARLibController.EnableAR();
        ARLibController.EnableSurfaceTracking("horizontal");
    }

    private void HandleVpsPose(VPSPoseData pose)
    {
        Debug.Log($"VPS pose: {pose.Position}");
    }
}

Start VPS localization

Set up VPS after initialization and before you start localization:

var settings = new VPSSettings
{
    apiKey = "your-api-key",
    locationIds = new[] { "your-location-id" }
};

ARLibController.SetupVPS(settings);
ARLibController.StartVPS();

Listen to these events:

• ARLibController.VPSInitialized — VPS is ready.
• ARLibController.VPSPositionUpdated — a new localization pose.
• ARLibController.OnVPSErrorHappened — an error, as a string.

To tune how often requests are sent at a specific location, use SetSendPhotoDelay, SetGpsAccuracyBarrier and SetFirstRequestDelay.

Image and surface tracking

• Register images with AddTrackingImage before you turn tracking on. Wait for TrackedImagesArrayUpdate to confirm they loaded.
• Call EnableSurfaceTracking("horizontal" | "vertical" | "both") to find planes. Results come through SurfaceTrackingUpdated.

Build and upload

1. Pick the WebGL template. In Project Settings → Player → WebGL → Resolution and Presentation, choose the template you copied from the package.
2. Build. Use File → Build Settings → WebGL → Build.
3. Zip. Compress the build so that index.html is at the root of the zip.
4. Upload. Upload the archive in the zip uploader.
5. Test. Scan the QR code you get with the AR Clip iOS app.

Troubleshooting

• No camera feed in WebGL. Make sure TransparentBackground.jslib is in Assets/Plugins, and the render camera is both assigned and turned off.
• No AR events in Editor play mode. This is expected. Use ARLibTester, or build to WebGL for live data.
• Duplicate symbol errors. Make sure you removed the old ARLib folder before you imported the package.